<template>
	<view class="detail">
		<view class="box">
			<view class="top flexr flex-a-c flex-j-c">
				<view :class="['iconfont','icon',data.list.icon,data.list.isType == 1 ? 'ac1' : data.list.isType == 2 ? 'ac2' : data.list.isType == 3 ? 'ac3' : '']"></view>
				<view>{{data.list.title}}</view>
			</view>
			<view class="price">{{ data.list.isType == 1 ? '-' : data.list.isType == 2 ? '+' : '' }}{{data.list.price}}</view>
			<view class="flexr flex-a-c">
				<view class="w2">记录时间</view>
				<view class="">{{data.list.date}}</view>
			</view>
			<view class="flexr flex-a-c mt-10">
				<view class="w2">备注</view>
				<view class="flex1">{{data.list.remark}}</view>
			</view>
			<view class="flexr flex-a-c mt-40">
				<view class="flexr flex-a-c w5 flex-j-c" @click="deleteBtn">
					<view class="iconfont icon-shanchu icon1"></view>
					<view>删除</view>
				</view>
				<view class="flexr flex-a-c w5 flex-j-c" @click="editBtn">
					<view class="iconfont icon-xiugai icon2"></view>
					<view>编辑</view>
				</view>
			</view>
		</view>
		<!-- 修改数据的弹框 -->
		<popup-vue  ref="popup" :content = "data.list" @addSuccess='addSuccess'/>
	</view>
</template>

<script setup>
import popupVue from '../../components/popup.vue';
import { onLoad } from '@dcloudio/uni-app';
import { reactive ,ref} from 'vue';
import requestApi from '../../utils/api.js';
const data = reactive({
	list:{}
});
let popup = ref(null)
if(uni.getStorageSync('detail')){
	const list = JSON.parse(uni.getStorageSync('detail'))
	data.list = list
	uni.removeStorageSync('detail')
}
const editBtn = ()=>{
	popup.value.open()
}
const addSuccess = ()=>{
	uni.setStorageSync('refrsh',true)
	setTimeout(()=>{
		uni.navigateBack()
	},2000)
}
// 删除
const deleteBtn = ()=>{
	uni.showModal({
		title:'温馨提示',
		content:'是否要删除当前的账单',
		success:res=>{
			if(res.confirm){
				requestApi('jSign',{type:'del',id:data.list._id}).then(res=>{
					uni.showToast({
						title:res.result.msg,
						icon:'none'
					})
					if(res.result.status==='S'){
						
						uni.setStorageSync('refrsh',true)
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
					}
				})
			}
		}
	})
}
</script>

<style lang="scss" scoped>
.detail {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	box-sizing: border-box;
	padding: 40upx;
	.box {
		border-radius: 20upx;
		background-color: #fff;
		padding: 60upx 40upx 40upx;
		.icon {
			font-size: 30upx;
			width: 60upx;
			height: 60upx;
			border-radius: 50%;
			color: #fff;
			background-color: #3eb575;
			line-height: 60upx;
			text-align: center;
			margin-right: 20upx;
		}
		.price {
			font-size: 46upx;
			font-weight: bold;
			text-align: center;
			margin: 40upx 0;
		}
		.w2 {
			width: 160upx;
			color: #ccc;
		}
		.mt-10 {
			margin-top: 10upx;
		}
		.icon1,
		.icon2 {
			font-size: 50upx;
			color: red;
			margin-right: 20upx;
		}
		.icon2 {
			color: skyblue;
		}
		.w5 {
			width: 50%;
			height: 80upx;
			line-height: 80upx;
			border-right: 1upx solid #ccc;
		}
		.w5:last-child {
			border-right: none;
		}
		.mt-40 {
			margin-top: 60upx;
			padding-top: 20upx;
			border-top: 1upx solid #ccc;
		}
		.ac1 {
			color: #fff;
			background-color: #3eb575;
		}
		.ac2 {
			color: #fff;
			background-color: #f0b73a;
		}
		.ac3 {
			color: #fff;
			background-color: #7888aa;
		}
	}
}
</style>
